var loginAction = "/page/login.php";
var joinAction = "/page/join.php";

var LoginPanel = React.createClass({
	getInitialState:function(){
		return {
			log:"togActive",
			jo:"",
			ulink:loginAction,
			btn:"",
			idVal:"",
			pwVal:"",
			pwTwo:"",
			disabled:true
		};
	},
	logClick:function(){
		this.state.log=="togActive" ? this.setState({log:"togActive",jo:""}) : this.setState({log:"togActive",jo:""});
		this.setState({ulink:loginAction});
	},
	joClick:function(){
		this.state.jo=="togActive" ? this.setState({log:"",jo:"togActive"}) : this.setState({log:"",jo:"togActive"});
		this.setState({ulink:joinAction});
	},
	onChangeId:function(e){
		this.setState({idVal:e.target.value})
	},
	onChangePw:function(e){
		this.setState({pwVal:e.target.value})
	},
	onChangePwTwo:function(e){
		this.setState({pwTwo:e.target.value})
	},
	render:function(){
		var html = this.state.ulink==loginAction ? "":<li><input type="password" value={pw2} onChange={this.onChangePwTwo} name="pw2" placeholder="confirm password" /></li>;
		var btn = this.state.ulink==loginAction ? "Login":"Join";
		var btnClass = this.state.btn;
		var ulink = this.state.ulink;
		var uid = this.state.idVal;
		var pw = this.state.pwVal;
		var pw2 = this.state.pwTwo;
		ulink==loginAction ? (uid!=""&&pw!=""?(this.state.disabled=false,this.state.btn="bgBtn") : (this.state.disabled=true,this.state.btn="")) : (uid!=""&&pw!=""&&pw2!=""&&pw===pw2?(this.state.disabled=false,this.state.btn="bgBtn") : (this.state.disabled=true,this.state.btn=""));
		return (
			<div>
				<form action={this.state.ulink}>
					<div className="login" id={this.state.log} onClick={this.logClick}>Login</div>
					<div className="join" id={this.state.jo} onClick={this.joClick}>Join</div>
					<div className="cont">
						<ul>
							<li><input type="text" name="id" value={uid} placeholder="User name" onChange={this.onChangeId} /></li>
							<li><input type="password" name="pw" value={pw} placeholder="password" onChange={this.onChangePw} /></li>
							{html}
							<li><input type="submit" name="submit" value={btn} className={this.state.btn} disabled={this.state.disabled} /></li>
						</ul>
					</div>
				</form>
			</div>
		);
	}
});

React.render(
	<LoginPanel />,
	document.getElementById("loginPanel")
);